<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta name="viewport" content="width=320, user-scalable=0"/>
  <meta name="viewport" content="minimum-scale=1, maximum-scale=1"/>
  <script src="ianime029-all.js"></script>
  <script type="text/javascript">
var anime = new iAnime();

iAnime.effects.trail = function(e,t,x,y) {
    this.move(e, t, x, y);
    var obj = document.createElement("img");
    obj.src = e.src;
    obj.style.position = "absolute";
    obj.style.left = x + "px";
    obj.style.top = y + "px";
    document.body.appendChild(obj);
    anime.add({
        element: obj,
        effect: 'fadeout',
        duration: 200,
        onComplete: function() {
            document.body.removeChild(obj);
        }
    });
};

function moveIt(obj)
{
    anime.add({
        element: obj,
        cp: [{x:rnd(), y:rnd()}, {x:rnd(), y:rnd()}],
        x: rnd(),
        y: rnd(),
        effect: 'trail',
        duration: 1000,
        onComplete : function() {
            moveIt(obj);
        }
    });
}

function rnd()
{
    return Math.floor(Math.random()*320);
}

function start()
{
    var icon = document.getElementById('icon');
    moveIt(icon);
}
  </script>
</head>
<body onload="start()">
  <img id='icon' src="images/feed-icon-28x28.png"  
       style="position:absolute; left:20px; top:20px" />
</body>
</html>
